<template>
   <div>
       <header>
           <div class="topWrapper" v-if="showForm">
               <el-form :size="customStyle.size" v-if="userInfo.authBtn.includes('/user/set')" ref="commonValidateForm" class="outerForm" :model="sendFormData" label-width="100px" :rules="rules">
                   <el-form-item label="用户名" prop="senduser">
                       <el-input clearable placeholder="请输入用户名" v-model="sendFormData.senduser" autocomplete="off"></el-input>
                   </el-form-item>
                   <!--<el-form-item label="密码" label-width="80px" prop="username">
                       <el-input disabled clearable placeholder="请输入用户名" v-model="sendFormData.username" autocomplete="off"></el-input>
                   </el-form-item>-->
                   <el-form-item v-if="!isAddUser || isCharge" :label="`${sendFormData.chargeType?'重置':'充值'}金额`" prop="balance">
                       <el-input clearable type="number" placeholder="请输入充值金额" v-model.number="sendFormData.balance" autocomplete="off"></el-input>
                   </el-form-item>
                   <el-form-item label="备注 " prop="remark">
                       <el-input clearable placeholder="请输入备注" v-model="sendFormData.remark" autocomplete="off"></el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button :size="customStyle.size" type="primary" @click="rowSave(undefined,true,isCharge && `确定为用户 ${sendFormData.senduser} ${(sendFormData.chargeType?'重置余额为 ':'充值 ') + sendFormData.balance}` || warnMsg)">{{isAddUser?'添 加':(sendFormData.chargeType?'重 置':'充 值')}}</el-button>
                   </el-form-item>
               </el-form>
           </div>
           <div class="tabSwitch">
               <el-checkbox v-if="userInfo.authBtn.includes('/user/set') || userInfo.authBtn.includes('/user/del')" @change="v=>v && (isCharge=false)" v-model="isAddUser">用户修改</el-checkbox>
           </div>
       </header>
       <el-table
           :data="tableData"
           border
           stripe
       >
           <el-table-column
               prop="username"
               label="用户名">
           </el-table-column>
           <!--<el-table-column
               prop="password"
               label="密码">
           </el-table-column>-->
           <el-table-column
               prop="balance"
               label="余额">
           </el-table-column>
           <el-table-column
               prop="loginIp"
               min-width="120px"
               label="IP">
               <template #default="scope">
                   <div class="lineItem">当前登录IP：{{scope.row.loginIp}}</div>
                   <div class="lineItem" v-if="scope.row.clientIp || scope.row.lastLoginIp" :class="{'color-error':scope.row.clientIp}">{{scope.row.clientIp && '异常IP：' || scope.row.lastLoginIp && '上次登录IP：'}}{{scope.row.clientIp || scope.row.lastLoginIp}}</div>
               </template>
           </el-table-column>
           <el-table-column
               label="操作"
               min-width="120px">
               <template #default="scope">
                   <div class="controlBth">
                       <el-button size="mini" type="primary" v-if="userInfo.authBtn.includes('/user/addBalance')" plain @click="changeBalance(scope.row.username,0)">余额充值</el-button>
                       <el-button size="mini" type="danger" v-if="userInfo.authBtn.includes('/user/delBalance')" plain @click="changeBalance(scope.row.username,1)">重置余额</el-button>
                       <el-popover
                           placement="bottom"
                           width="160"
                           v-if="scope.row.clientIp && userInfo.authBtn.includes('/user/ipConfirm')"
                           v-model="visible[scope.$index]">
                           <p>异常IP登录？</p>
                           <div style="text-align: center">
                               <el-button size="mini" type="primary" @click="handleIpConfirm({status:1,senduser:scope.row.username},scope.$index)">通过</el-button>
                               <el-button type="primary" size="mini" @click="handleIpConfirm({status:0,senduser:scope.row.username},scope.$index)">拒绝</el-button>
                           </div>
                           <el-button size="mini" slot="reference" type="primary" plain>IP审核</el-button>
                       </el-popover>
                       <el-button size="mini" v-if="isAddUser && userInfo.authBtn.includes('/user/setAuth')" type="danger" plain @click="rowDelete({username:userInfo.username,senduser:scope.row.username},`确认删除用户 ${scope.row.username}`,true)">删 除</el-button>
                   </div>
                </template>
           </el-table-column>
       </el-table>
   </div>
</template>

<script>
import tableMixin from '@/mixins/table'
import {mapGetters} from "vuex";
import {getUser,setUser,delUser,ipConfirm,addBalance,delBalance} from '@/api/user'
export default {
    name: "user",
    mixins: [tableMixin],
    data() {
        return {
            visible:[],
            isAddUser:false,
            isCharge:false,
            sendFormData:{
                chargeType:0,
                senduser:'',
                username:'',
                password:'',
                balance:'',
                remark:''
            },
            rules:{
                balance: [
                    {required: true, message: '请输入充值金额', trigger: 'blur'},
                ],
                senduser: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
            }
        }
    },
    created() {
        this.sendFormData.username=this.userInfo.username
    },
    computed:{
        ...mapGetters([
            'userList'
        ]),
        warnMsg(){
            if(!this.isCharge){
                return !this.isCharge && this.tableData.find(i=>i.username===this.sendFormData.senduser) &&
                    `${this.sendFormData.senduser}用户名已存在，继续操作将重置该用户的所有信息？`;
            }
        },
        showForm(){
            return this.isAddUser || this.isCharge
        }
    },
    methods:{
        handleIpConfirm(data,index){
            ipConfirm(data).then(res=>{
                this.$message.success(res.msg)
                this.$set(this.visible,index,false)
                this.getTableData()
            })
        },
        tableCallback(){
            if(this.userList.length!==this.tableData.length){
                this.$store.commit('exclude/SET_USER_LIST',this.tableData.map(i=>i.username))
            }
        },
        rowSaveCallback(){
            this.isCharge=false
        },
        changeBalance(username,chargeType){
            this.isCharge=true
            this.isAddUser=false
            this.sendFormData.senduser=username
            this.sendFormData.chargeType=chargeType
        },
        rowSaveApi(...args){
            return this.isAddUser?setUser(...args):(this.sendFormData.chargeType?delBalance(...args):addBalance(...args))
        },
        rowDeleteApi:delUser,
        tableApi:getUser,
    }
}
</script>

<style scoped lang="scss">
    .tabSwitch {
        text-align: right;
        line-height:50px;
    }
</style>
